<template>
  <el-dialog :title="!dataForm.id ? '查看' : ''" :close-on-click-modal="false" :visible.sync="visible">

    <div>
      <div>退货商品</div>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="商品图片"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="价格/货号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="属性">
          </el-table-column>
          <el-table-column
            prop="address"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="address"
            label="小计">
          </el-table-column>
        </el-table>
        <div class="text-right"> <span>合计：</span> <span>¥200.00</span> </div>
    </div>

    <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <div>服务单信息</div>
      <div>
        <table style="width: 100%">
            <tr>
              <th class="wt150">服务单号</th>
              <th>313860326</th>
            </tr>
            <tr>
              <th>申请状态</th>
              <th>待处理</th>
            </tr>
            <tr>
              <th>订单编号</th>
              <th>201707196398345  查看</th>
            </tr>
            <tr>
              <th>申请时间</th>
              <th>2017-07-19 14:48:38</th>
            </tr>
            <tr>
              <th>用户账号</th>
              <th>18000000000</th>
            </tr>
            <tr>
              <th>联系人</th>
              <th>大梨</th>
            </tr>
            <tr>
              <th>联系电话</th>
              <th>18000000000</th>
            </tr>
            <tr>
              <th>退货原因</th>
              <th>质量问题</th>
            </tr>
            <tr>
              <th>问题描述</th>
              <th>描述文字</th>
            </tr>
            <tr>
              <th>凭证照片</th>
              <th></th>
            </tr>
        </table>
        <table class="mt30" style="width: 100%">
            <tr>
              <th class="wt150">订单金额</th>
              <th>¥200.00 </th>
            </tr>
            <tr>
              <th>退运费</th>
              <th>
                <el-radio v-model="retreat_freight" label="1">不退运费</el-radio>
                <el-radio v-model="retreat_freight" label="2">退运费</el-radio>
              </th>
            </tr>
            <tr>
              <th>确认退款金额</th>
              <th><el-input ></el-input></th>
            </tr>
            <tr>
              <th>选择收货点</th>
              <th>2017-07-19 14:48:38</th>
            </tr>
            <tr>
              <th>收货人姓名</th>
              <th><el-input ></el-input></th>
            </tr>
            <tr>
              <th>所在区域C</th>
              <th>大梨</th>
            </tr>
            <tr>
              <th>详细地址</th>
              <th><el-input ></el-input></th>
            </tr>
            <tr>
              <th>联系电话</th>
              <th><el-input ></el-input></th>
            </tr>
            <tr>
              <th>处理备注</th>
              <th><el-input ></el-input></th>
            </tr>
        </table>
      </div>

    </el-form>
    <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="dataFormSubmit()">确认退货</el-button>
      <el-button type="primary" @click="dataFormSubmit()">拒绝退货</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {treeDataTranslate} from '@/utils'

  export default {
    data () {
      return {
        visible: false,
        is_pass: 1,
        dataForm: {
          id: '0'
        },
        value: 1,
        options: [
          {
            name: '图片内容不符合',
            value: 0
          }, {
            name: '直播时间过长',
            value: 1
          }, {
            name: '其它',
            value: 2
          }
        ]

      }
    },

    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].resetFields()
        // })
      }
    }
  }
</script>

<style lang="scss">
table{
  border-collapse:collapse;
  border-spacing:0;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;
}
th{border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:5px 15px;}
.mt30{
  margin-top: 30px;
}
.wt150{
  width: 150px;
}
.wt400{
  width: 400px;
}
.text-right{
  text-align: right;
}
</style>
